/*jquery时间必须绑定放置在函数中（1.jquery页面初始加载事件）2.js函数中*/
//添加数据绑定单击事件
$(function() {
	// 	/*jquery绑定事件*/
	// 	$(".checkUser").click(function(){
	// 		alert("check");
	// });

	$("#finish input:first").click(function() {
		var $phone = $("[name='phone']");
		// alert($phone);
		$phone.each(function(i) {
			if ($($phone[i]).val() == "") {
				alert("请填写完整的用户信息！！！");
			}
		});
	});


	//初始加载列表数据
	//js操作dom元素-->jquery也可以操作dom元素
	//ECMAScript：简称ES,ES6版本名称
	//js定义数据类型关键字，var是ES5之前，ES6建议使用let定义数据类型关键字。
	//需求：将前端页面静态数据更改成动态数据
	//使用json数据存储一个对象
	//未持照 1 已持照 0
	var arrStatus = new Array("已持照", "未持照");
	// var jsonTR = {
	// 	"id": "1",
	// 	"userName": "胡英修",
	// 	"mark_no": "bj53473409",
	// 	"status": 1,
	// 	"phone": "13574556682",
	// 	"openDate": "2021-07-07"
	// };
	//使用json存储多个对象
	var jsonTRArrs = [{
			"id": "01",
			"userName": "胡英修",
			"mark_no": "bj53473409",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "02",
			"userName": "尚晶晶",
			"mark_no": "bj45562320",
			"status": 1,
			"phone": "18732556559",
			"openDate": "2021-07-05"
		},
		{
			"id": "03",
			"userName": "张小鱼",
			"mark_no": "hb99971228",
			"status": 0,
			"phone": "18774545690",
			"openDate": "2021-07-07"
		},
		{
			"id": "04",
			"userName": "冯秋泓",
			"mark_no": "fj633009sdf",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "05",
			"userName": "温暖",
			"mark_no": "sh93452821",
			"status": 1,
			"phone": "13756690450",
			"openDate": "2021-07-07"
		},
		{
			"id": "06",
			"userName": "景然",
			"mark_no": "tj0932js84df",
			"status": 0,
			"phone": "13250504432",
			"openDate": "2021-07-07"
		},
		{
			"id": "07",
			"userName": "张小野",
			"mark_no": "jn82978333",
			"status": 1,
			"phone": "13030337456",
			"openDate": "2021-07-07"
		},
		{
			"id": "08",
			"userName": "李利",
			"mark_no": "bj908923423",
			"status": 1,
			"phone": "13412344900",
			"openDate": "2021-07-07"
		},
		{
			"id": "09",
			"userName": "高法冰",
			"mark_no": "bj23409iio",
			"status": 0,
			"phone": "18666884477",
			"openDate": "2021-07-07"
		},
		{
			"id": "10",
			"userName": "杜若辉",
			"mark_no": "sx238yy9423",
			"status": 1,
			"phone": "15833280099",
			"openDate": "2021-07-07"
		},
		{
			"id": "11",
			"userName": "段秋雨",
			"mark_no": "gs40923ttt",
			"status": 1,
			"phone": "13264778841",
			"openDate": "2021-07-07"
		}
	];

	//json展示 一个json对象，多个json对象
	// var jsonArrays = {
	// 	"jsonObj":
	// }
	//循环遍历数组对象
	var $trStr = "";
	$(jsonTRArrs).each(function(index) {
		var arrJson = jsonTRArrs[index];
		$trStr += `  <tr>                       
		<td>${arrJson.id}</td>
        <td>${arrJson.userName}</td>
     	<td class="markNo">${arrJson.mark_no}</td>
		<td>${arrStatus[arrJson.status]}</td>
        <td>${arrJson.phone}</td>
        <td>${arrJson.openDate}</td>
		<td><a href="#">详情</a>
		
		<a href="javascript:void(0);",class="del">删除</a></td>
				</tr>`;
	});


	//jquery绑定dom元素。
	//append追加到里面；append追加到外面。
	$(".tbody").append($trStr);


	// $(".firstline").appendTo($tr);
	//使用jquery进行各行换色
	$(".tbody tr").odd().css("background-color", "blanchedalmond");
	$(".tbody tr").even().css("background-color", "beige");



	//使用jquery动态删除当前数据   javascript:void(0);禁止刷新当前页面
	$(".del").click(function() {
		// alert(1);
		// console.log($(this).html);
		if (confirm("确定删除当前元素吗？")) {
			//删除，this删除当前dom元素
			$(this).parent().parent().remove();
		}
	});



	//jquery鼠标移进（mouseover，mousecenter）、移出事件（mouseout，mouseleave）
	//mouseover 和 mouseout 一套使用；mousecenter和mouseleave一起使用
	//mouseover和mousecenter区别：mouseover事件在鼠标移动到选取的元素及其子元素上时触发。

	//需求：鼠标移动到当前显示行，加深背景颜色
	$(".tbody tr").mouseover(function() {
		//常识：css（）样式添加的是行内样式  2.addclass()添加的是
		//	$(this).addClass("bg");
		//用行内样式
		$(this).css("background-color", "lightblue");
	});

	//鼠标移出
	$(".tbody tr").mouseout(function() {
		//
		//	$(this).removeClass("bg");
		//用行内样式
		$(this).css("background-color", "beige");
	});


	//hover鼠标移出事件，属于复合事件
	$(".tbody tr").hover(function() {
		$(this).css("font-size", "17px");
		// $(this).css("border", "5px solid black");
	}, function() {
		$(this).css("font-size", "15px");
	});




	//搜索查询
	$("#search button").click(function() {
		//获取搜索文本框值
		var $search = $(".select_input").val();
		if ($search =='') {
			//默认查询所有
			init();
		}
		//使用jquery获取动物元素中的中签编码
		var $markNo = $(".markNo");

		//循环遍历
		//1.将查询的数据重新加载绑定  2.删除查询匹配之外的数据（不太符合正常流程。）
		$markNo.each(function(i) {
			var mNo = $($markNo.get(i)).text();
			// console.log("mNo:" + mNo);
			if ($search == mNo) {
				// console.log(i)
				var $tr = $(".tbody tr").eq(i);
				//直接绑定
				$(".tbody").html($tr);
			}
		});
	});
});




//初始加载
function init() {
	
	//初始加载列表数据
	//js操作dom元素-->jquery也可以操作dom元素
	//ECMAScript：简称ES,ES6版本名称
	//js定义数据类型关键字，var是ES5之前，ES6建议使用let定义数据类型关键字。
	//需求：将前端页面静态数据更改成动态数据
	//使用json数据存储一个对象
	//未持照 1 已持照 0
	var arrStatus = new Array("已持照", "未持照");
	// var jsonTR = {
	// 	"id": "1",
	// 	"userName": "胡英修",
	// 	"mark_no": "bj53473409",
	// 	"status": 1,
	// 	"phone": "13574556682",
	// 	"openDate": "2021-07-07"
	// };
	//使用json存储多个对象
	var jsonTRArrs = [{
			"id": "01",
			"userName": "胡英修",
			"mark_no": "bj53473409",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "02",
			"userName": "尚晶晶",
			"mark_no": "bj45562320",
			"status": 1,
			"phone": "18732556559",
			"openDate": "2021-07-05"
		},
		{
			"id": "03",
			"userName": "张小鱼",
			"mark_no": "hb99971228",
			"status": 0,
			"phone": "18774545690",
			"openDate": "2021-07-07"
		},
		{
			"id": "04",
			"userName": "冯秋泓",
			"mark_no": "fj633009sdf",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "05",
			"userName": "温暖",
			"mark_no": "sh93452821",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "06",
			"userName": "景然",
			"mark_no": "bj53473409",
			"status": 0,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "07",
			"userName": "张小野",
			"mark_no": "bj53473409",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "08",
			"userName": "李利",
			"mark_no": "bj53473409",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "09",
			"userName": "高法冰",
			"mark_no": "bj53473409",
			"status": 0,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "10",
			"userName": "杜若辉",
			"mark_no": "bj53473409",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"id": "11",
			"userName": "段秋雨",
			"mark_no": "bj53473409",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		}
	];

	//json展示 一个json对象，多个json对象
	// var jsonArrays = {
	// 	"jsonObj":
	// }
	//循环遍历数组对象
	var $trStr = "";
	$(jsonTRArrs).each(function(index) {
		var arrJson = jsonTRArrs[index];
		$trStr += `  <tr>                       
		<td>${arrJson.id}</td>
	    <td>${arrJson.userName}</td>
	 	<td class ="markNo">${arrJson.mark_no}</td>
		<td>${arrStatus[arrJson.status]}</td>
	    <td>${arrJson.phone}</td>
	    <td>${arrJson.openDate}</td>
		<td><a href="#">详情</a>
		
		<a href="javascript:void(0);",class="del">删除</a></td>
				</tr>`;
	});


	//jquery绑定dom元素。
	//append追加到里面；append追加到外面。
	$(".tbody").append($trStr);


	// $(".firstline").appendTo($tr);
	//使用jquery进行各行换色
	$(".tbody tr").odd().css("background-color", "blanchedalmond");
	$(".tbody tr").even().css("background-color", "beige");

}


/*返回*/
function reback() {
	window.location.href = "user_travel_manager.html";
}
